<%--
  Created by IntelliJ IDEA.
  User: 谢斌
  Date: 2021/1/27
  Time: 15:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<jsp:include page="../ctx.jsp"/>
<html>
<script src="${ctx}/detail/style/js/jquery.js"></script>
<script type="text/javascript">
    /** // 删除菜品项
     function removeSorder(node) {
			var gid = node.lang;
			window.location.href = "/wirelessplatform/sorder.html?method=removeSorder&gid="+gid;
		}

     // 修改菜品项数量
     function alterSorder(node) {
			var snumber = node.value;
			var gid = node.lang;
			window.location.href = "/wirelessplatform/sorder.html?method=alterSorder&gid="+gid+"&snumber="+snumber;
		}
     */

</script>
<head>
    <link rel="stylesheet" type="text/css" href="${ctx}/detail/style/css/index.css"/>
</head>
<body style="text-align: center">
<div id="all">
    <div id="menu">
        <!-- 餐车div -->
        <div id="count">
            <table align="center" width="100%">
                <tr height="40">
                    <td align="center" width="20%">菜名</td>
                    <td align="center" width="20%">单价</td>
                    <td align="center" width="20%">数量</td>
                    <td align="center" width="20%">小计</td>
                    <td align="center" width="20%">操作</td>
                </tr>
                <c:forEach items="${sessionScope.front_cart}" var="cart">
                    <tr id="cart" height="60">
                        <td align="center" width="20%" id="foodName">${cart.foodName}</td>
                        <td align="center" width="20%" id="price">￥${cart.foodPrice}</td>
                        <td align="center" width="20%">
                            <input type="text" value="${cart.num}" size="3" lang="3"
                                   onblur="updateByFoodNum(this,value,${cart.foodId})">
                        </td>
                        <td align="center" width="20%" id="numPrice"> ￥${cart.numPrice}</td>
                        <td align="center" width="20%">
                            <input type="button" value="删除" class="btn_next" lang="3"
                                   onclick="deleteFood(this,${cart.foodId})"/>
                        </td>
                    </tr>
                </c:forEach>
                <tr>
                    <td colspan="6" align="right">总计:
                        <span style="font-size:36px;">&yen;
                            <span id="totalPrice" style="font-size:36px;">
                                ${sessionScope.cart_total_price}
                            </span>
                        </span>
                        <label id="counter" style="font-size:36px"></label>
                    </td>
                </tr>
                <tr>
                    <td colspan="6" style="margin-left: 100px; text-align: center;" align="right">
                        <input type="hidden" name="bId" value="">

                        <input type="button" value="下单" class="btn_next" onclick="createOrder()"/>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <!-- 右边菜系列表，菜品搜索框  -->
    <div id="dish_class">
        <div id="dish_top">
            <ul>
                <li class="dish_num"></li>
                <li>
                    <a href="foodcart?action=find">
                        <img src="${ctx}/detail/style/images/call2.gif"/>
                    </a>
                </li>
            </ul>
        </div>

        <div id="dish_2">
            <ul>
                <c:forEach items="${sessionScope.front_foodType}" var="type">
                    <li>
                        <a href="front?action=findFoodByPage&typeId=${type.typeId}">
                                ${type.typeName}
                        </a>
                    </li>
                </c:forEach>
            </ul>
        </div>
        <div id="dish_3">
            <!-- 搜索菜品表单  -->
            <form action="front?action=findFoodByPage" method="post">
                <table width="166px">
                    <tr>
                        <td>
                            <input type="text" id="dish_name" name="foodName" class="select_value"/>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="submit" id="sub" value=""/></td>
                    </tr>
                    <tr>
                        <td>
                            <!--查看菜单-->
                            <a href="/front?action=findFoodByPage">
                                <img src="${ctx}/detail/style/images/look.gif"/>
                            </a>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">

    function deleteFood(obj, foodId) {
        var url = "foodcart?action=deleteByFoodId&foodId=" + foodId;
        $.get(url, null, function (result) {
            if (result.success) {
                //修改总价
                $("#totalPrice").text(result.totalFoodPrice);
                //删除当前行
                $(obj).parent().parent().remove();
            } else {
                alert("删除失败");
            }
        }, "json");
    }

    //更新菜品数量
    function updateByFoodNum(obj, foodNum, foodId) {

        var url = "foodcart?action=updateByFoodNum&foodNum=" + foodNum + "&foodId=" + foodId;
        $.get(url, null, function (result) {
            if (result.success) {
                if (result.foodNum == 0) {
                    $(obj).parent().parent().remove();
                }
                location.href = "foodcart?action=find";

                //修改总价
                $("#totalPrice").text(result.totalFoodPrice);

            }
        }, "json");
    }

    // 下单
    function createOrder() {
        window.location.href = "order?action=addOrder";
    }
</script>
</html>
